<template>
  <container-item-wrapper :widget="widget">
    <div class="grid-stack" :id="'render-'+widget.id">
    </div>
    <teleport v-if="isLoaded" v-for="item in widget.options.gridItems" :key="item.id"
              :to="`#grid-item-render-${item.id}`">
      <grid-col-item :itemId="item.id" :widget="item.widget" />
    </teleport>
  </container-item-wrapper>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from '../../../utils/i18n'
import refMixin from '../../../components/form-render/refMixin'
import ContainerItemWrapper from './container-item-wrapper'
import GridColItem from './grid-col-item'
import containerItemMixin from './containerItemMixin'
import { GridStack } from 'gridstack'

export default {
  name: 'vf-grid-item',  //grid-item跟VueGridLayout全局注册组件重名，故特殊处理！！
  componentName: 'ContainerItem',
  mixins: [emitter, i18n, refMixin, containerItemMixin],
  components: {
    ContainerItemWrapper,
    GridColItem,
  },
  props: {
    widget: Object,
  },
  data() {
    return {
      grid: null,
      isLoaded: false,
    }
  },
  inject: ['refList', 'sfRefList', 'globalModel'],
  created() {
    this.initRefList()
  },
  mounted() {
    this.grid = GridStack.init({ // DO NOT use grid.value = GridStack.init(), see above
      float: true,
      cellHeight: this.widget.options.colHeight,
      minRow: 1,
      margin: '5px',
    }, document.getElementById('render-' + this.widget.id))
    const renderSource = localStorage.getItem('renderSource')
    this.grid.on('added', (event, items) => {
      items.forEach((item) => {
        const itemId = item.id
        item.id = itemId
        const itemEl = item.el
        const itemElContent = itemEl.querySelector('.grid-stack-item-content')
        // 预览的时候可以有，渲染的时候去掉
        if (renderSource === 'preview') {
          itemElContent.style.outline = '1px solid #18BC9C';
        } else {
          itemElContent.style.outline = '';
        }
        const mountPoint = document.createElement('div')
        mountPoint.style = 'height: 100%;box-sizing:border-box;'
        mountPoint.id = `grid-item-render-${itemId}`
        itemElContent.appendChild(mountPoint)
        this.widget.options.gridItems.find(gridItem => gridItem.id === itemId).widget = this.widget.cols.find(col => itemId === col.id)
      })
      this.isLoaded = true
    })
    // debugger
    console.log('this.grid', Array.isArray(this.widget.options.gridItems));
    console.log('this.grid', this.widget.options.gridItems);

    if (Array.isArray(this.widget.options.gridItems)) {
      this.grid.load([...this.widget.options.gridItems])
    } else {
      this.grid.load(this.widget.options.gridItems)
    }
    this.grid.setStatic(true)
  },
  beforeUnmount() {
    this.grid = null
    this.unregisterFromRefList()
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
/*.grid-stack {
  background: #FAFAD2;
}*/

:deep(.grid-stack-item-content) {
  //background-color: #18BC9C;
  // outline: 1px solid #18BC9C;
}
</style>
